<template>
	<body-wrap isFlex>
		<template #header>
			<view class="tabBox">
				<view class="item" :class="{'selected':active==1}" @click="setTab(1)">个人咨询包</view>
				<view class="item" :class="{'selected':active==2}" @click="setTab(2)">公司咨询包</view>
			</view>
		</template>
		<view class="zxbmain">
			<view class="zxbInfo" v-for="dt in lists" :key="dt._id">
				<view class="xxbox">
					<view class="name">{{dt.productId.title}}</view>
					<template v-if="active==2 && dt.companyId">
						<view class="syqk">
							公司名称：{{dt.companyId.name}}
						</view>
						<view class="syqk" v-if="dt.teachers && dt.teachers.length>0">
							服务专家：
							<template v-for="dt2 in dt.teachers" :key="dt2._id">
								{{dt2.name}},
							</template>
						</view>
					</template>
					<view class="syqk" v-if="dt.productId.type==2">
						使用情况：已使用{{get_use_count(dt._id)}}次
					</view>
					<view class="syqk" v-else-if="dt.productId.type==3">
						使用情况：已使用{{get_use_count(dt._id)}}次，剩余{{dt.productId.quantity-get_use_count(dt._id)}}次
					</view>
					<view class="express">有效期：{{dateFormat('Y-m-d H:i',dt.startTime)}} ~ {{dateFormat('Y-m-d H:i',dt.endTime)}}</view>
					<view class="symxbox">
						<navigator class="ubtn" :url="'/pages/home/package/useList?oid='+dt._id">使用明细</navigator>
						<!-- 当前用户在线为公司购买的咨询包时，显示该按钮 -->
						<template v-if="userInfo._id==dt.operatorId">
							<navigator class="ubtn yqry" :url="`/pages/home/package/qrCode?companyId=${dt.companyId._id}&name=${dt.companyId.name}`">邀请人员</navigator>
						</template>
					</view>
				</view>
			</view>
			<empty v-if="lists && lists.length==0"/>
		</view>
		<template #footer>
			<div class="footer-btn-box">
				<navigator class="myBtn" url="/pages/package/package">购买咨询包</navigator>
			</div>
		</template>
	</body-wrap>
</template>

<script>
	import {defineComponent,reactive,toRefs,onMounted,getCurrentInstance,computed} from 'vue'
	import {onLoad,onShow} from '@dcloudio/uni-app'
	import { useStore } from 'vuex'
	import bodyWrap from "@/components/bodyWrap/index.vue"
	import cmImage from "@/components/cmImage/index.vue"
	import {addCoupon,getOrderList,packageUseCount,getCustomList} from "@/api/consult.js"
	import {toast,dateFormat} from '@/utils/common.js'
	import empty from "@/components/empty/index.vue"
	export default defineComponent({
		components:{
			bodyWrap,
			cmImage,
			empty
		},
		props:{
		
		},
		setup(props,context) {
			const store = useStore()
			const {proxy} = getCurrentInstance()
			
			const state = reactive({
				userInfo:computed(()=>store.state.base.userInfo),
				lists:'',
				pageIndex:1,
				pageSize:20,
				countData:'',
				active:1,
			})
			
			onMounted(async ()=>{
				// 咨询包使用统计、
				const res = await packageUseCount()
				state.countData = res.data || ''
				//console.log("countData:",state.countData )
				get_order_list()
			})
			
			const setTab = (index)=>{
				state.active = index
				state.pageIndex = 1
				get_order_list()
			}
			
			const get_order_list = ()=>{
				let  params = {
					pageIndex:state.pageIndex,
					pageSize:state.pageSize,
					status:1,
					orderType:63
				}
				if(state.active==2){ // 公司咨询包
					params.companyId = state.userInfo.companyId
				}else{ // 个人咨询包
					params.userId = state.userInfo._id
				}
				getOrderList(params).then(async res =>{
					if(res.code == 200){
						state.lists = res.data.data
						if(state.active==2){ // 公司咨询包
							for(let i=0;i<state.lists.length;i++){
								const item = state.lists[i]
								// 循环查找该公司的服务专家(后台分配的专家负责某个公司)
								const rt = await getCustomList({
									serviceId:item.productId.owner,  // 咨询包的所有者
									customId:item.companyId._id  // 购买咨询包的公司
								})
								if(rt.code == 200 && rt.data.data.length>0){
									item.teachers = rt.data.data[0].experter  // 添加字段
								}
							}
						}
					}else{
						toast('获取数据出错了！')
					}
					console.log("state.lists:",state.lists)
				})
			}
			const get_use_count = (id) => {
			  if (state.countData) {
			    const fData = state.countData.find(item => item._id == id)
			    if (fData) {
			      return fData.count
			    } else {
			      return 0
			    }
			  }
			}
			
			return {
				...toRefs(state),
				dateFormat,
				get_use_count,
				setTab
			}
		}
	})
</script>

<style lang="scss" scoped>
	.zxbmain{
		flex: 1;
		flex-shrink: 0;
		padding: 20rpx;
		.zxbInfo{
			display: flex;
			border-radius: 15rpx;
			box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
			background: #fff;
			padding: 20rpx;
			&+.zxbInfo{
				margin-top: 20rpx;
			}
			.xxbox{
				flex: 1;
				flex-shrink: 0;
				line-height: 50rpx;
				.name{
					font-size: 30rpx;
					font-weight: bold;
				}
				.express{
					font-size: 28rpx;
					color: #999;
					padding: 0;
				}
				.symxbox{
					display: flex;
					align-items: center;
					justify-content: flex-end;
					padding: 10rpx 0 0 0;
					.ubtn{
						display: flex;
						align-items: center;
						justify-content: center;
						min-width: 170rpx;
						height: 60rpx;
						border-radius: 40rpx;
						background: rgba(4, 148, 23,0.4);
						border: 1px solid #999;
						&+.ubtn{
							margin-left: 20rpx;
						}
						&.yqry{
							background: #e3af2f;
							border: 0;
							color: #fff;
						}
					}
				}
			}
			.rdbox{
				display: flex;
				align-items: center;
				padding: 0 0 0 15rpx;
			}
		}
	}
	.tabBox{
		display: flex;
		background: #fff;
		.item{
			display: flex;
			flex: 1;
			align-items: center;
			justify-content: center;
			height: 90rpx;
			font-size: 30rpx;
			&.selected{
				color: #e3af2f;
				position: relative;
				z-index: 10;
				&:before{
					content: '';
					position: absolute;
					z-index: 11;
					width: 100%;
					left: 0;
					bottom: 0;
					height: 2px;
					background: #e3af2f;
				}
			}
		}
	}
</style>
